import React, { Component } from "react"
import { WingBlank, WhiteSpace, NavBar, Button, Icon, Flex, InputItem, TextareaItem } from 'antd-mobile'
import { ajax, isSuccess } from "../../api/ajax"
import { Redirect } from "react-router-dom";


/**
 * 查看卡片详情(复习页面)
 */
export default class CardDetail extends Component {

    state = {
    }

    componentDidMount() {
        this.reqCardDetail(this.props.match.params.id);
    }
    componentWillUnmount() {
        //查看次数+1
        // console.log("will unmount!")
        this.reqIncrementCheckTimes();
    }

    reqCardDetail = async (id) => {
        var response = await ajax("/card/get/cardDetail/" + id);
        if (isSuccess(response)) {
            var data = response.data.data;
            this.setState(data)
        }
    }
    reqIncrementCheckTimes = async () => {
        var data = {
            id: this.state.id,
            checkTimes: this.state.checkTimes + 1
        };

        await ajax("/card/update", data, "POST");
        // console.log(response.data.message)
    }

    /**
     * 复习
     * @param {*} type 
     */
    reviewed = async (type) => {
        var reqData={id:this.state.id,type:type}
        var response = await ajax("/card/reviewed",reqData,"GET");
        if (isSuccess(response)) {
            this.back();
        }
    }


    back = () => {
        this.props.history.goBack()
    }
    toEdit = () => {
        console.log("toEdit");
        var {id,title,content,planName} = this.state
        this.props.history.replace({
            pathname: "/edit",
            state: { id,title,content,planName }
        })
    }

    render() {

        return (
            <div>
                <NavBar mode="light"
                    icon={<span onClick={this.back}><Icon type="left" /></span>}
                    rightContent={<span onClick={this.toEdit}>编辑</span>}
                >复习</NavBar>
                <WhiteSpace />
                <WingBlank size="md">
                    <InputItem

                        value={this.state.title}
                        editable={false}
                    ></InputItem>
                    <WhiteSpace />
                    <TextareaItem
                        value={this.state.content}
                        rows={15}
                        editable={false}
                    />
                </WingBlank>
                <div style={{ position: 'fixed', bottom: 0, width: '100%' }}>
                    <WingBlank>

                        <Flex justify="center" align="center">
                            <Flex.Item>
                                <Button type="primary" className="flex-btn"  onClick={() => this.reviewed("KNOWN")}>认识</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button type="ghost"  className="flex-btn"  onClick={() => this.reviewed("UNCLEARLY")}>模糊</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button type="ghost"  className="flex-btn" onClick={() => this.reviewed("FORGET")}>忘记</Button>
                            </Flex.Item>
                        </Flex>

                    </WingBlank>
                </div>
            </div>

        )
    }
}